<template>
  <view class="fixed" :class="classType">
    <text class="businessName">{{baseInfo.businessName}}</text>
    <view>
      <button class="likes" v-if="worksId" @click="handleAddLikes">{{ praise?'已喜欢':'喜欢' }}</button>
      <button class="share" open-type="share">分享</button>
      <button class="ask" @click="handleOperate('tel')">咨询</button>
    </view>
  </view>
  <Authorize ref="authorizeRef" @auth-success="setPraise" />
</template>

<script setup>
  import {
    onShareAppMessage
  } from '@dcloudio/uni-app'
  import {
    getPraiseStatusApi,
    doPariseApi,
    cancelPariseApi
  } from '@/api/praise.js'
  import {
    doPariseFunc
  } from '@/utils/index.js'
  import {
    useStore
  } from 'vuex'
  import {
    computed,
    ref
  } from 'vue'
  import Authorize from './Authorize.vue'

  const props = defineProps({
    classType: {
      type: String,
      default: 'dark'
    },
    worksId: {
      type: String,
      default: ''
    },
    shareUrl:{
      type:String,
      default:''
    }
  })
  const authorizeRef = ref()
  const handleAddLikes = async () => {
    try {
      await authorizeRef.value?.checkAuthorize()
      const openid = uni.getStorageSync('openid')
      if (openid) {
        const params = {
          userOpenId: openid,
          relationId: props.worksId,
          likesType: '作品'
        }
        doPariseFunc(praise.value, params, setPraise)
      }
    } catch (e) {
      await setPraise()
      //TODO handle the exception
    }
  }

  const store = useStore()
  onShareAppMessage(() => {
    return {
      title: `${baseInfo.value.businessName}`,
      path: props.shareUrl,
      success(res) {
        uni.showToast({
          title: '分享成功'
        })
      }
    }
  })
  // 商家详细信息
  const baseInfo = computed(() => {
    return store?.getters?.getBusinessInfo?.baseInfoBo ?? {}
  })
  const handleOperate = (type) => {
    const {
      businessTel: phoneNumber,
    } = baseInfo.value
    uni.makePhoneCall({
      phoneNumber
    })
  }
  // 是否点赞数据
  const praise = ref(0)
  const setPraise = async () => {
    const openid = uni.getStorageSync('openid')
    if (openid) {
      const {
        code,
        data
      } = await getPraiseStatusApi({
        openId: openid,
        relationId: props.worksId
      })
      if (code === '000000') {
        praise.value = data
      }
    }
  }
  defineExpose({
    setPraise
  })
</script>

<style lang="scss" scoped>
  .fixed {
    position: fixed;
    // z-index: 99;
    left: 0;
    bottom: 0;
    width: 750rpx;
    height: 100rpx;
    background-color: #323232;
    display: flex;
    justify-content: space-between;
    align-items: center;

    view {
      display: flex;

      button {
        height: 100rpx;
        padding: 0;
        line-height: 100rpx;
        width: 120rpx;
        background: #666;
        color: #fff;
        font-size: 26rpx;
      }
    }

    .likes {
      border-left: 1px solid #eee;
      border-right: 1px solid #eee;
    }

    .ask {
      background: #fff;
      color: #000;
    }
  }

  .businessName {
    color: #fff;
    background-color: transparent;
    font-size: 32rpx;
    padding-left: 20rpx;
  }

  .light.fixed {
    background-color: #fff;

    .businessName {
      color: #000;
    }

    button {
      color: #000;
      background: #fff;
    }

    .ask {
      color: #fff;
      background: #222;
    }
  }
</style>
